// 从 Angular 核心库中导入 Component 符号，并为组件类加上 @Component 装饰器
import { Component, OnInit } from '@angular/core';
// 导入这个 Hero 类
import { Hero } from '../hero';
// 并导入模拟的 HEROES
// 删除 HEROES 的导入语句，因为你以后不会再用它了。 转而导入 HeroService。
// import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';
import { MessageService } from '../message.service';
// @Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。
@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[] = [];
  // 模板中被点击的英雄赋值给组件的 selectedHero 属性
  selectedHero?: Hero;

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
    this.messageService.add(`HeroesComponent: Selected hero id=${hero.id}`);
  }
  // 往构造函数中添加一个私有的 heroService，其类型为 HeroService。
  constructor(private heroService: HeroService, private messageService: MessageService) { }
  getHeroes(): void {
    // 把英雄的数组赋值给了该组件的 heroes 属性。 这种赋值是同步的
    // this.heroes = this.heroService.getHeroes();
    // 新的版本等待 Observable 发出这个英雄数组，这可能立即发生，也可能会在几分钟之后。
    // 然后，subscribe() 方法把这个英雄数组传给这个回调函数，该函数把英雄数组赋值给组件的 heroes 属性。
    // 使用这种异步方式，当 HeroService 从远端服务器获取英雄数据时，就可以工作了。
    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
  }
  ngOnInit(): void {
    this.getHeroes();
  }


  add(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.addHero({ name } as Hero)
      .subscribe(hero => {
        this.heroes.push(hero);
      });
  }
  delete(hero: Hero): void {
    this.heroes = this.heroes.filter(h => h !== hero);
    // 组件与 heroService.deleteHero() 返回的 Observable 还完全没有关联。必须订阅它。
    this.heroService.deleteHero(hero.id).subscribe();
  }
}
